<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性基础</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    {{count}}
</div>

<script>
    const {createApp,ref} = Vue
    // 定义组件
    const config = {
        /* 我们应该在setup阶段把数据准备好 */
        /*
            在setup方法中定义的方法可以直接使用在setup中声明的属性
            我们不可以在setup中使用this关键字，因为在setup函数执行期间vue组件还没有初始化完毕，此时this还是undefined
         */
        setup(){
            const count = ref(0)

            const add = () => {
                count.value ++
            }

            /* 把数据暴露给外部 */
            return {count,add}
        }
    }
    const app = createApp(config)
    app.mount('#app')
    /*
        获取组件实例并打印其 setup 函数中定义的响应式数据 count
    */
    const componentInstance = app._instance
    componentInstance.setupState.count = 100     // 这里修改了组件实例中的数据，页面也会一并刷新
    componentInstance.setupState.add()
    console.log(componentInstance.setupState.count)
</script>
</body>
</html>